<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <todo-item v-for="(item,index) of list"
                   :key="index"
                   :content="item"
                   :index="index"
                   @delete="handleDelete">  <!-- 监听delete事件 -->
        </todo-item>      <!-- 通过模板使用组件 -->
    </ul>
</div>

<script>
    //子组件
    Vue.component('todo-item', {
        props: ['content', 'index'],
        template: '<li @click="handleClick">{{content}}</li>',
        methods: {
            handleClick: function () {
                //发布
                this.$emit('delete', this.index)
            }
        }
    });

    //最外层实例，父组件
    new Vue({
        el: "#root",
        data: {
            inputValue: '',
            list: []
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.inputValue);
                this.inputValue = ''
            },
            handleDelete: function (index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>
</body>
</html>